<template>
  <div>
    <Dialog ref="dialog" :headerStatus="false" title="个人信息" width="1000">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="个人资料" name="first">
          <userInfo :studentData="props.studentData"></userInfo>
        </el-tab-pane>
        <el-tab-pane label="志愿表" name="fourth3">
          <volunteerList :studentData="studentData"></volunteerList>
        </el-tab-pane>
      </el-tabs>
    </Dialog>
  </div>
</template>
<script setup>
import { ref } from 'vue';
import Dialog from '@/components/Dialog/Dialog.vue';
import userInfo from './userInfo.vue';
import volunteerList from './volunteerList.vue';

const props = defineProps({
  studentData: {
    type: Object,
    default: {},
  },
});

const activeName = ref('first');
const dialog = ref(null);
const analyse = ref(null);

function openChange(val) {
  dialog.value.openChange();
  activeName.value = val;
  analyse.value.initChart();
}

function handleClick(val) {
  if (val.index == 1) {
    analyse.value.initChart();
  }
}
defineExpose({
  openChange,
});
</script>
<style lang="scss" scoped>
::v-deep(.el-tabs__item.is-active) {
  color: #1d2129;
  font-weight: 600;
}

::v-deep(.el-tabs__active-bar) {
  height: 3px;
  background-color: #1d2129;
}

::v-deep(.el-tabs__item) {
  height: 52px;
  line-height: 52px;
  color: #4e5969;
  font-size: 20px;
}
</style>
